import React, { useEffect } from 'react'
import { Button, Form, Input, Card, message } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import {
  reqAddHospitalSet,
  reqGetHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospital/hospitalSet'

export default function AddOrUpdateHospitalSet() {
  const navigate = useNavigate()
  const [form] = Form.useForm()

  const { id } = useParams()

  // 保存按钮触发的事件处理函数
  const onFinish = async (values: any) => {
    if (id) {
      // 修改
      // 注意: 修改时,一定要上传被修改数据的id
      values.id = id
      await reqUpdateHospitalSet(values)
      message.success('修改医院设置成功')
    } else {
      // 发送请求添加
      await reqAddHospitalSet(values)
      // 说明服务器添加成功
      // 1. 提示用户
      message.success('添加医院设置成功')
    }
    // 2. 回到医院设置页面
    navigate(-1)
  }

  useEffect(() => {
    async function fetch() {
      // 如果是修改才发送请求,添加不发送请求
      // 如果id有数据,说明一定是修改.如果没有是添加
      if (id) {
        const result = await reqGetHospitalSet(id as string)
        // 拿到数据之后,渲染到表单中
        form.setFieldsValue(result)
      }
    }
    fetch()
  }, [])

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入apiUrl' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: '请输入联系人手机',
              pattern: /^1[3-9]\d{9}$/,
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            style={{ marginLeft: 10 }}
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
